<template>
    <el-col >
        <el-form  class="widget-table widget-view widget-view-drag"
                  :class="{
      active: selectWidget.key && selectWidget.key == element.key

    }"
                  @click.native.stop="handleSelectWidget(index)"
                  :label="element.name"
        >
            <!--                  @click.native.stop="handleSelectWidget(index)"-->

        <div class="sub-header" ng-click="selectField(field)">

            <h4 class="ng-binding" style="margin:8px">{{  element.options.showTitle==undefined?(element.name):   element.options.showTitle?element.name:""}}</h4>
        </div>



    <div class="widget-table-wrapper">
      <div class="widget-table-content">

          <el-card class="box-card">

              <el-tabs v-model="element.options.activeName"
                       @tab-click="handleClick"
                       :stretch="element.options.stretch"
                       :tab-position="element.options.tabPosition"
                       :type="element.options.tabsType"
              >


                  <el-tab-pane   v-for="(item,tabIndex) in element.options.options" :name="item.value" :label="item.value" :key="item.value" >
                      <draggable style="height: 100px"
                                 v-model="element.tabColumns[tabIndex]"
                                 v-bind="{group:{name: 'people', put: handlePut}, ghostClass: 'ghost',animation: 200, handle: '.drag-widget'}"
                                 :no-transition-on-drag="true"
                                 @add="handleWidgetTableAdd($event, element,tabIndex)"
                                 @change="handleWidgetTableChange"
                      >
                          <transition-group name="fade" tag="div" class="widget-table-col" style="96%">
                              <tabs-block-item
                                      v-for="(item, index) in element.tabColumns[tabIndex]" v-if="item.key"
                                      :key="item.key"
                                      :element="item"
                                      :select.sync="selectWidget"
                                      :index="tabIndex"
                                      :elementIndex="index"
                                      :data="element.tabColumns[tabIndex]"
                                      @select-change="handleSelectChange($event, item,tabIndex)"
                              >
                                  <el-row></el-row>
                              </tabs-block-item>
                          </transition-group>
                      </draggable>

                  </el-tab-pane>

              </el-tabs>



          </el-card>




      </div>
    </div>

     <div class="widget-view-action widget-col-action">
        <button  type = "button"  class="show-circle action-delete" @click.stop="handleWidgetDelete(index)" v-if="selectWidget.key == element.key">
        	  <i class="iconfont icon-trash" ></i>
         </button>

    </div>

</el-form>
</el-col>
</template>

<script>
import Draggable from 'vuedraggable'
import TabsBlockItem from './TabsBlockItem'

export default {
  components: {
    Draggable,
      TabsBlockItem
  },
  props: ['element', 'select', 'index', 'data','elementIndex'],
  data () {
    return {
      selectWidget: this.select,
      // columnsWidthStyle: '96%'
    }
  },
  mounted () {

   // this.calcTableColumnsWidth()
  },
  methods: {
    handleSelectWidget (index) {
      this.selectWidget = this.data.list[index]
    },
     handleClick(tab, event) {
        var index=  tab.index

},
    handleWidgetDelete (index) {
      if (this.data.list.length == 1) {
        this.$emit('select-change', -1)
      } else {
        if (this.data.list.length - 1 == index) {
          this.$emit('select-change', index - 1)
        } else {
          this.$emit('select-change', index)
        }
      }

      this.data.list.splice(index, 1)
    },
    handleWidgetTableChange ($event) {

    },
    calcTableColumnsWidth () {
      // this.columnsWidth = (this.element.tableColumns.length+1)*200

      this.columnsWidthStyle = 'calc(200px)'

      let widthArray = []

      for (let i = 0; i < this.element.tableColumns.length; i++) {
        if (!this.element.tableColumns[i].options.width || this.element.tableColumns[i].options.width=='100%') {
          widthArray.push('200px')
        } else {
          widthArray.push(this.element.tableColumns[i].options.width)
        }
      }

      this.columnsWidthStyle = `calc(200px + ${widthArray.join(' + ')})`
    },
    handlePut (a, b, c) {

      if (c.className.indexOf('widget-col') >=0 || c.className.indexOf('widget-table') >= 0 || c.className.indexOf('no-put') >= 0 || c.children[0].className.indexOf('no-put') >= 0) {
        return false
      }
      return true
    },
    handleWidgetTableAdd ($event, table,tabsIndex) {
        try {
            const newIndex = $event.newIndex
            const key = new Date().getTime() + ''
            this.$set(table.tabColumns[tabsIndex], newIndex, {
                ...table.tabColumns[tabsIndex][newIndex],
                options: {
                    ...table.tabColumns[tabsIndex][newIndex].options,
                    remoteFunc: table.tabColumns[tabsIndex][newIndex].options.remoteFunc || 'func_'+key,
                    width: '200px'
                },
                novalid: {
                    ...table.tabColumns[tabsIndex][newIndex].novalid,
                },
                key,
                model: table.tabColumns[tabsIndex][newIndex].model ? table.tabColumns[tabsIndex][newIndex].model : table.tabColumns[tabsIndex][newIndex].type + '_' + key,
                rules: table.tabColumns[tabsIndex][newIndex].rules ? [...table.tabColumns[tabsIndex][newIndex].rules] : []
            })

            if (Object.keys(table.tabColumns[tabsIndex][newIndex].options).includes('options')) {
                this.$set(table.tabColumns[tabsIndex], newIndex, {
                    ...table.tabColumns[tabsIndex][newIndex],
                    options: {
                        ...table.tabColumns[tabsIndex][newIndex].options,
                        options: [...table.tabColumns[tabsIndex][newIndex].options.options.map(item => ({
                            ...item
                        }))]
                    }
                })
            }

            this.selectWidget = table.tabColumns[tabsIndex][newIndex]
        }catch (e) {

        }

    },
    handleSelectChange (index, item) {
      setTimeout(() => {
        index >=0 ? (this.selectWidget = this.element.tabColumns[index]) : (this.selectWidget = {})
      })
    }
  },
  watch: {
    select (val) {
        if (val){
            this.selectWidget = val
        } else{
            this.selectWidget = this.element

        }

    },
    selectWidget: {
      deep: true,
      handler (val) {
        this.$emit('update:select', val)
      }
    },
    element: {
      deep: true,
      handler (val) {

      //  this.calcTableColumnsWidth()
      }
    }
  }
}
</script>
<style>
.el-input {
    /* width: 100%  !important; */
}

.el-textarea {
    /* width: 100%  !important; */
}
</style>

